<template>
	<view class="container">
		<!-- 标题 -->
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏主体 -->
		<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
			<!-- 左侧返回按钮 -->
			<image style="height: 30rpx; width: 30rpx;" src="/static/images/ic_back.png" @click="handleBack"></image>
		
			<!-- 中间标题 -->
			<text class="title">设置</text>
		
		</view>

		<!-- 用户信息列表 -->
		<view class="info-card">
			<!-- 昵称 -->
			<view class="info-item">
				<text>用户编号</text>
				<view class="item-right">
					<text>{{userId}}</text>
					<image src="/static/images/ic_copy.png" style="height: 24rpx; width: 24rpx;"
						@click.stop="$app.toCopy(userId.toString())"></image>
				</view>
			</view>
			<view class="divider"></view>

			<!-- 昵称 -->
			<view class="info-item">
				<text>昵称</text>
				<view class="item-right">
					<text class="item-value" @click="toNickSetting" :style="{color: nickName ? '#000' :'rgba(0, 0, 0, 0.40)'}">{{nickName ? nickName : "去设置"}}</text>
					<image src="../../static/images/arrow_right.png" style="width: 12rpx; height: 22rpx;"></image>
				</view>
			</view>
			<view class="divider"></view>

			<!-- 手机号 -->
			<view class="info-item">
				<text>手机号</text>
				<text class="item-value">{{mobile}}</text>
			</view>
			<view class="divider"></view>

			<!-- 密码管理 -->
			<view class="info-item" @click="navigateToPassword">
				<text>密码管理</text>
				<image src="../../static/images/arrow_right.png" style="width: 12rpx; height: 22rpx;"></image>
			</view>
			<view class="divider"></view>

			<!-- 注册时间 -->
			<view class="info-item" @click="navigateToAbout" v-if="isShow">
				<text>关于惠收卡</text>
				<image src="../../static/images/arrow_right.png" style="width: 12rpx; height: 22rpx;"></image>
			</view>
			
			<view class="divider" v-if="isShow"></view>
			
			<view class="info-item">
				<text>注册时间</text>
				<view class="item-right">
					<text class="item-value">{{registTime}}</text>
					<image src="../../static/images/arrow_right.png" style="width: 12rpx; height: 22rpx;"></image>
				</view>
			</view>
			
			<view class="divider"></view>
			
			<view class="info-item" @click="handleLogoff">
				<text>注销账户</text>
				<view class="item-right">
					<image src="../../static/images/arrow_right.png" style="width: 12rpx; height: 22rpx;"></image>
				</view>
			</view>
			
			<view class="divider"></view>
			
			<view class="info-item">
				<text>当前版本</text>
				<view class="item-right">
					<text class="item-value">1.0.0</text>
					<image src="../../static/images/arrow_right.png" style="width: 12rpx; height: 22rpx;"></image>
				</view>
			</view>
		</view>

		<!-- 备案号 -->
		<view class="footer">
			<view class="copyright">客服电话：{{appConfig.phone}}</view>
			<text class="copyright">{{appConfig.icp}}</text>
			<view class="copyright">{{appConfig.copyright}}</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn" @click="handleLogout">
			退出登录
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.loadUserData();
		},
		data() {
			return {
				userId: '',
				nickName: '',
				mobile: '',
				registTime: '',
				appConfig: null,
				statusBarHeight: 20, // 默认状态栏高度
				navBarHeight: 44, // 默认导航栏高度
				isShow: uni.getStorageSync("isShow"),
			}
		},
		async mounted() {
			this.appConfig = await this.$app.getAppConfit();
		},
		created() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			//获取状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight
		
			// 微信小程序适配
			// #ifdef MP-WEIXIN
			const menuRect = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = (menuRect.top - systemInfo.statusBarHeight) * 2 + menuRect.height
			this.rightSafeArea = systemInfo.windowWidth - menuRect.left // 计算右侧避让距离[6](@ref)
			// #endif
		},
		methods: {
			//获取最新用户信息
			async loadUserData() {
				try {
					const res = await this.$http({
						method: 'GET',
						url: '/user/base/info',
					});

					const user = res.data;
					this.$app.setUserInfo(user);
					this.nickName = user.nickName;
					this.mobile = user.mobile;
					this.userId = user.userId;
					this.registTime = this.$app.formateDate(user.registerTime)

				} catch (error) {
					//TODO handle the exception
					console.log(error);
				}
			},
			// 跳转密码管理
			navigateToPassword() {
				uni.navigateTo({
					url: '/pages/passwword-manage/passwword-manage'
				})
			},
			// 跳转关于我们
			navigateToAbout() {
				uni.navigateTo({
					url: '/pages/about-us/about-us'
				})
			},
			// 注销账户
			handleLogoff() {
				uni.showModal({
					title: '确认注销',
					content: '您确定要注销当前账号吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '已提交注销申请，具体进度联系客服查询',
								position: 'bottom',
								icon: 'none'
							});
						}
					}
				})
			},
			// 退出登录处理
			handleLogout() {
				uni.showModal({
					title: '确认退出登录',
					content: '您确定要退出当前账号吗？',
					success: (res) => {
						if (res.confirm) {
							// 执行退出登录操作
							this.$app.removeLoginStorage();

							uni.switchTab({
								url: '/pages/index/index' // 需在 pages.json 的 tabBar 中注册
							});
						}
					}
				})
			},
			// 去设置昵称
			toNickSetting() {
				uni.navigateTo({
					url: '/pages/nick-setting/nick-setting'
				})
			},
			handleBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #F7FAFF;
	}
	
	/* 状态栏占位 */
	.status-bar {
		width: 100%;
		background-color: #FFFFFF;//与导航栏同色
	}
	
	/* 标题样式 */
	.title {
		font-size: 28rpx;
		color: #000;
		font-weight: 500;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	/* 导航栏主体 */
	.nav-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		background-color: #FFFFFF;
		position: relative;
	}

	.info-card {
		margin-top: 20rpx;
		padding: 0 70rpx;
		background-color: #FFFFFF;

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			font-size: 28rpx;
			color: #000;
		}

		.item-right {
			display: flex;
			align-items: center;

			image {
				margin-left: 20rpx;
			}
		}

		.divider {
			height: 2rpx;
			background-color: rgba(0, 0, 0, 0.09);
		}
	}

	.footer {
		width: 100%;
		padding: 20rpx;
		text-align: center;
		background-color: #fff;
		position: absolute;
		bottom: 180rpx;
	}

	.logout-btn {
		position: fixed;
		bottom: 80rpx;
		left: 32rpx;
		right: 32rpx;
		width: calc(100% - 64rpx);
		background-color: #4D7EF4;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
	}
</style>